<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>
<!--DOM:文档对象模型  BOM:浏览器对象模型-->
<input type="number" placeholder="请输入要计算的数字" id="in1"><br>
<input type="number" placeholder="请输入要计算的数字" id="in2"><br>
<input type="button" value="加" onclick="calc('+')">
<input type="button" value="减" onclick="calc('-')">
<input type="button" value="乘" onclick="calc('*')">
<input type="button" value="除" onclick="calc('/')"><br>
<h1>结果:<span></span></h1>
<script>
  // // 第一步:获取用户输入的数字
  // function getNum1(){
  //   // 获取DOM对象 JS本身没有办法直接操作HTML，只能先获取DOM对象然后才能进行操作
  //   let in1_val = document.getElementById('in1');
  //   console.log(in1_val); //DOM对象
  //   console.log(in1_val.value)
  // }
  // function getNum2(){
  //   // 获取DOM对象 JS本身没有办法直接操作HTML，只能先获取DOM对象然后才能进行操作
  //   let in2_val = document.getElementById('in2');
  //   console.log(in2_val); //DOM对象
  //   console.log(in2_val.value)
  // }
  function calc(f){
    console.log('符号是:',f)
    // 获取到DOM对象 JS无法直接操作HTML
    let in1_val = document.getElementById('in1');
    let in2_val = document.getElementById('in2');
    // input 类型 .value 获取值
    // 从网页中获取的内容全是字符串   parseFloat转成number类型
    in1 = parseFloat(in1_val.value);
    in2 = parseFloat(in2_val.value)
    // isNaN 判断是不是NaN,如果是返回true,否则返回false
    if (isNaN(in1) || isNaN(in2)){
      alert('请输入数字内容~')
    }
    console.log('转化前的值:'+in1_val.value,in2_val.value);
    console.log('转化后的值:'+in1,in2);
    // 获取span DOM对象
    spanEle = document.querySelector("span");
    if (f=='+'){
      // innerText 文本  innerHTML 元素
      spanEle.innerHTML=in1+in2;
      console.log(in1+in2);
    }if (f=='-'){
      spanEle.innerHTML=in1-in2;
      console.log(in1-in2);
    }if (f=='*'){
      spanEle.innerHTML=in1*in2;
      console.log(in1*in2);
    }if (f=='/'){
      if (in2!=0){
        spanEle.innerHTML=in1/in2;
        console.log(in1/in2);
      }else {
        alert('除数不能为0~')
      }
    }
  }
</script>
</body>
</html>